<template>
  <div class='mobile-scaling-wrapper'>
    <!-- 【注】 valid-tip-box 类名将作为paper页面的DOM索引，不能修改 -->
    <div class='valid-tip-box'
         v-if='question.validType === "required"'>
      请为选项打分
    </div>
    <!-- 表单 -->
    <ul class='scaling-radio' v-if='extendAttr.scaleType === "radio"'>
      <li class='radio-item'
          v-for='(option, index) of question.optionList'
          :key='"radio" + index'
          :class='{
            active: selectedScale >= index + extendAttr.startScale
          }'
          @click='selectOption(option, index)'>
        {{index + extendAttr.startScale}}
      </li>
    </ul>
    <!-- 星级、喜欢、微笑、点赞 -->
    <ul class='scaling-img'
        :class='{showScore:isRecord && question.useAnswer}'
        v-if='extendAttr.scaleType !== "radio" && extendAttr.scaleType !== "slider"'>
      <li class='img-item survey-evaluate-sprite-bg-mini'
          v-for='(option, index) of question.optionList'
          :key='"img" + index'
          :class='{
            active: selectedScale >= index + extendAttr.startScale,
            star: extendAttr.scaleType === "star",
            like: extendAttr.scaleType === "like",
            smile: extendAttr.scaleType === "smile",
            praise: extendAttr.scaleType === "praise"
          }'
          @click='selectOption(option, index)'>
        <div class='img-item-label'
            :class='{
              active: activeIndex === index
            }'>
          {{index + extendAttr.startScale}}
        </div>
        <div class='img-item-score'>{{option.score}}分</div>
      </li>
    </ul>
    <!-- 滑块 -->
    <div class='scaling-slider'
         v-if='extendAttr.scaleType === "slider"'
         :class='{showScore:isRecord && question.useAnswer}'>
      <div class='slider-box'>
        <slider
          v-model='selectedScale'
          :min='extendAttr.startScale'
          :max='extendAttr.startScale + extendAttr.totalScale - 1'
          :step='1'
          active-color='#2672ff'
          inactive-color='transparent'
          bar-height='4px'
          button-size='18px'
          :disabled='isRecord'
          @change='changeSliderValue'>
          <template #button>
            <div class="custom-button">
              <div class='button-tip'>{{selectedScale}}</div>
            </div>
          </template>
        </slider>
        <ul class='slider-rule'>
          <li class='rule-point'
              v-for='(option, index) of question.optionList'
              :key='"slider" + index'>
            <div class='point-score' v-if='isRecord && question.useAnswer'>
              {{option.score}}分
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 量表描述 -->
    <div class='scaling-desc'>
      <span class='desc-item'>{{extendAttr.minScaleLabel}}</span>
      <span class='desc-item'>{{extendAttr.maxScaleLabel}}</span>
    </div>
    <!-- 答案相关 -->
    <div class='qa-answer'
         v-if='isRecord &&
               question.useAnswer'>
      <!-- 得分 -->
      <div class='qa-answer-score'>
        <div class='score-label'>得分：</div>
        <div class='score-count'>{{answerScore}}分</div>
      </div>
      <!-- 答案解析 -->
      <div class='qa-answer-parse'
           v-if='question.answerParse'>
        <div class='answer-title'>答案解析：</div>
        <div class='answer-content' v-html='question.answerParse'></div>
      </div>
    </div>
  </div>
</template>

<script>
import slider from 'vant/lib/slider'
import 'vant/lib/slider/style'
export default {
  name: 'mobileScaling',
  data () {
    return {
      extendAttr: {
        startScale: 1,
        totalScale: 7,
        scaleType: 'radio',
        minScaleLabel: '非常不满意',
        maxScaleLabel: '非常满意'
      },
      selectedScale: -1,
      activeIndex: -1, // 用于短暂展示选中的分值
      answerScore: 0 // 展示选择层级对应的分数
    }
  },
  components: {
    slider
  },
  props: {
    question: {
      type: Object,
      default () {
        return {}
      }
    },
    isRecord: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    resetValidType () {
      this.question.validType = ''
    },
    changeSliderValue (value) {
      this.resetValidType()
      let index = value - this.extendAttr.startScale
      if (index >= 0) {
        this.updateSelect(this.question.optionList[index].optionId)
      }
    },
    selectOption (opt, index) {
      if (this.isRecord) {
        return false
      }
      this.resetValidType()
      this.selectedScale = index + this.extendAttr.startScale
      this.updateSelect(opt.optionId)
      this.activeIndex = index
      setTimeout(() => {
        this.activeIndex = -1
      }, 700)
    },
    updateSelect (optionId) {
      this.question.optionList.forEach(option => {
        if (option.optionId === optionId) {
          option.isSelected = true
        } else {
          option.isSelected = false
        }
      })
    },
    init () {
      // 获取量表题的扩展配置项
      let extendAttr = JSON.parse(this.question.extendAttr || '{}')
      this.assignKey(this.extendAttr, extendAttr)
      // console.log('extendAttr: ', this.extendAttr)
      // 如果是滑块模式，默认为第一个选项选中
      if (this.extendAttr.scaleType === 'slider') {
        this.selectedScale = this.extendAttr.startScale
        this.updateSelect(this.question.optionList[0].optionId)
      }
      // 如果是查看记录模式, 回显答题记录
      if (this.isRecord) {
        if (this.question.answer) {
          // let optionResults = this.question.answer.optionResults
          let optionResults = this.question.answer
          if (optionResults[0]) {
            let answerOptionId = optionResults[0].optionId
            // console.log('answerOptionId: ', answerOptionId)
            this.question.optionList.forEach((option, index) => {
              if (option.optionId === answerOptionId) {
                option.isSelected = true
                this.selectedScale = index + this.extendAttr.startScale
                this.answerScore = option.score || 0
              } else {
                option.isSelected = false
              }
            })
          }
        }
      }
    }
  },
  created () {
    this.init()
  }
}
</script>

<style lang="stylus" scoped>
.mobile-scaling-wrapper
  margin-top 10px
  .valid-tip-box
    color #ef6262
    font-size 14px
    margin-bottom 5px
  // 表单
  .scaling-radio
    display flex
    height 24px
    .radio-item
      flex 1
      margin-right 2px
      background #eaeaea
      line-height 24px
      text-align center
      cursor pointer
      color #aaa
      font-size 14px
      &:last-child
        margin-right 0
      &.active
        background #2672ff
        color #fff
  // 星级、喜欢、微笑、点赞
  .scaling-img
    height 36px
    border 1px solid #dde5ed
    border-radius 4px
    display flex
    align-items center
    justify-content space-between
    padding 0 5px
    &.showScore
      margin-bottom 30px
      .img-item
        .img-item-score
          display block
    .img-item
      position relative
      width 18px
      height 18px
      cursor pointer
      &.star
        background-position 0 -2px
      &.like
        background-position -20px -2px
      &.smile
        background-position -40px -2px
      &.praise
        background-position -60px -2px
      &.active
        &.star
          background-position 0 -22px
        &.like
          background-position -20px -22px
        &.smile
          background-position -40px -22px
        &.praise
          background-position -60px -22px
      .img-item-label
        position absolute
        left -2px
        right 0
        top -26px
        width 22px
        height 18px
        line-height 18px
        text-align center
        background #ffbe3a
        color #fff
        font-size 12px
        border-radius 4px
        padding 0 2px
        transform translateY(100%)
        opacity 0
        transition all linear 0.2s
        box-sizing border-box
        &.active
          transform translateY(0)
          opacity 1
      .img-item-score
        display none
        position absolute
        left 50%
        transform translateX(-50%)
        top 36px
        text-align center
        font-size 10px
        color #aaa
        white-space nowrap
  // 滑块
  .scaling-slider
    position relative
    height 36px
    border 1px solid #dde5ed
    border-radius 4px
    padding 0 15px
    display flex
    align-items center
    &.showScore
      margin-bottom 30px
    .slider-box
      position relative
      width 100%
      height 4px
      background #ccc
      .van-slider
        position absolute
        z-index 10
        &.van-slider--disabled
          opacity 1
        .custom-button
          position relative
          width 18px
          height 18px
          background #fff
          border-radius 50%
          box-shadow 0 1px 2px rgba(0,0,0,.3)
          &::after
            position absolute
            left 0
            right 0
            top 0
            bottom 0
            margin auto
            content ''
            width 14px
            height 14px
            background #2672ff
            border-radius 50%
          .button-tip
            position absolute
            top -20px
            left -2px
            height 18px
            line-height 18px
            width 22px
            text-align center
            background #2672ff
            color #fff
            border-radius 4px
            font-size 12px
            padding 0 2px
            box-sizing border-box
    .slider-rule
      display flex
      justify-content space-between
      .rule-point
        position relative
        width 4px
        height 4px
        background #aaa
        border-radius 50%
        .point-score
          position absolute
          top 30px
          left 50%
          transform translateX(-50%)
          font-size 10px
          color #aaa
          white-space nowrap
          text-align center
  // 量表描述
  .scaling-desc
    display flex
    justify-content space-between
    margin-top 10px
    .desc-item
      font-size 12px
      color #aaa
  .qa-answer
    margin 15px 0 10px
    border-top 1px dashed #dde5ed
    .qa-answer-score
      display flex
      align-items center
      border-bottom 1px dashed #dde5ed
      padding 10px
      font-size 14px
      .score-label
        color #333
      .score-count
        color #aaa
    .qa-answer-parse
      border-bottom 1px dashed #dde5ed
      border-radius 4px
      padding 10px
      .answer-title
        font-size 14px
        color #333
        margin-bottom 10px
      .answer-content
        font-size 14px
        line-height 1.5
        color #aaa
        >>> img, >>> iframe, >>> video
          max-width 100% !important
</style>
